<script lang="ts" setup>

import {computed, getCurrentInstance, onMounted, provide, ref} from "vue";
import type {CountUpOptions, ICountUp} from 'vue-countup-v3'
import CountUp from 'vue-countup-v3'
import {showToast} from "vant";
import egg1 from '@/assets/egg1.json';
import egg2 from '@/assets/egg2.json';
import egg3 from '@/assets/egg3.json';
import lottie from "lottie-web";
import showBox from '@/view/activity/components/showBox.vue'
import loadComponent from "@/view/activity/components/loading.vue";
import showTo from "@/view/activity/components/showToast.vue";
const {proxy} = getCurrentInstance() as any; // 类似于this
let toTxt = ref(' 成为高级推广人')
let invitedCode = ref('******')
//开始奖池
let num = ref(10000000)
//结束奖池
let endValueRef = ref(10000000)
//列表信息
let getList = ref([])
//全部信息
let userInfo:any = ref({})
let loading = ref(false)
provide('loading',loading)
let loadingTxt = ref('加载中...')
provide('loadingTxt',loadingTxt)
let isFirst = ref(true)
let showWin = ref(false)
provide('showWin', showWin)
//组件弹窗彩蛋
let ShowNToast = ref(false)
provide('ShowNToast', ShowNToast)
let ShowNToastTxt = ref('')
provide('ShowNToastTxt', ShowNToastTxt)
//
let list = [
  {
    txt1: "偷偷告诉你，邀请更多好友可以解锁神秘现金大奖",
    txt2: "10个朋友=额外现金大礼包，你的好友名单够了吗？",
    txt3: "完成进阶挑战，额外奖励大红包直接到账！",
    txt4: "隐藏的现金福利悄悄来临，快去找找吧，现金无门槛秒提现！",
  },
  {
    txt1: "新的一年，‘兔’飞猛进！快来参加活动，祝你好运开门红！",
    txt2: "金兔贺岁，福气满满！加入活动，和朋友一起瓜分新年红包！",
    txt3: "兔年行大运，红包滚滚来！活动已开启，快来抓住你的新春好运！",
    txt4: "新春大作战，红包抢不停！参与活动，体验兔年第一份惊喜！",
    txt5: "兔年送福气，红包不用抢！来活动赢大奖，新年奖励抱回家！",
  },
  {
    txt1: "这是一场邀请挑战！10人集结即可赢得额外超级现金奖励",
    txt2: "10人小目标，冲刺获得现金红包！",
    txt3: "越快进阶，红包越大，快去邀请吧！",
  },
]
let invitedList = computed(()=>{
  return [
    `赛盾新春活动，智能加速通道，名校课程、音乐MV任性看，无延迟更清晰！填写邀请码：${invitedCode.value}，难得的福利时刻，活动期内尽情免费使用，无后顾之忧。`,
    `快来参加赛盾限时活动，智能分流技术，海外课堂、音乐库瞬间访问，学习娱乐随心切换！填写我的邀请码：${invitedCode.value}，独家福利来袭，活动中免费使用，绝不容错过！`,
    `赛盾新春红包雨来袭！海外视听资源双向加速，不卡顿、不掉线，品质体验即刻拥有！填写邀请码：${invitedCode.value}，畅享活动特权，免费尝试，高质量体验近在咫尺。`,
    `千万红包等你领！专线护航，学习、观影、听歌畅通无阻，让您的时间更有价值！填写我的邀请码：${invitedCode.value}，赛盾活动特惠，无需支付，直接免费使用，轻松畅享！`,
    `赛盾新春活动，深度加速技术，海外音乐视频一气呵成，畅享高速时代！填写我的邀请码：${invitedCode.value}，尊享特权不用花钱，锁定免费年会员名额，就差你来！`,
    `赛盾新春特惠，高带宽专线支持，内容一键直达，不再为缓冲烦恼！填写我的邀请码：${invitedCode.value}，稀缺名额释放中，年会员零成本领取，先占先赢！`,
    `春节大红包，特权专线升级，国际资源无障碍访问，精彩不断、畅享无限！填写邀请码：${invitedCode.value}，新的起点，从赛盾免费年会员开始，先到者享！`,
    `赛盾春节活动开始啦！顶级专线赋能，视频课件瞬时加载，学习效率大幅提升！填写邀请码：${invitedCode.value}，免费开通年会员，无需等待，谁快谁得！`,
    `赛盾新春限时活动，悄然提速，让海外视频、音乐、学习内容自然而然流畅呈现。填写邀请码：${invitedCode.value}，抢到即赚到，限量免费年会员等你来拿！`,
    `赛盾大红包等你来！轻松升级网络，海外资源 quietly 加速，观看与学习更平稳。填写邀请码：${invitedCode.value}，先人一步，免费获取一年会员尊享权益！`,
    `赛盾新春送红包，安静加速，无需声张，海外视频、课程悄然顺畅体验。填写邀请码：${invitedCode.value}，零费用入手年会员，机会难得，抓住当下！`,
    `赛盾春节活动，无需华丽辞藻，默默加速访问，带来宁静却有效的提升。填写我的邀请码：${invitedCode.value}，年会员限量免费领取，行动快者轻松拥有全年特权!`,
    `赛盾新春活动，不声不响的改善，让观看内容的每一帧都更舒适自然。填写邀请码：${invitedCode.value}，不花一分，让你全年轻松畅享优质服务，先到先得！！`,
    `赛盾新春红包，无形保障，让画面清晰度得以保持。填写邀请码：${invitedCode.value}，邀请好友助力，一起拼红包！`,
    `赛盾春节大礼包火爆开启，稳定加速体验，让你的网络表现更出色。填写邀请码：${invitedCode.value}，年度会员免费开抢，数量有限，先下手为强！`,
    `新春活动火爆开启，不必费力等待，让资源呈现更快速，学习资料快速浏览，信息获取更便捷。填写我的邀请码：${invitedCode.value}，领取赛盾年会员先到先得！`,
    `新春送福利，专线支持，减少卡顿，提高加载速度，海量学习资料，轻松查阅，无后顾之忧。填写邀请码：${invitedCode.value}，活动期间赛盾会员免费使用！`,
    `赛盾新春限时活动，邀请好友领取千万现金红包！专线加速引擎，全网海外资源畅通无阻，轻松一点就上！填写我的邀请码：${invitedCode.value}，助我一臂之力吧！`,
    `新春来临，千万红包等你拿！极速传输管道，海外视频、音乐、课程全程流畅，学习娱乐两不误！填写我的邀请码：${invitedCode.value}，邀请好友助力我一起拿大奖！`,
    `赛盾春节大放送，一键开启专属加速，全球热门视频音频快速直达，轻松告别卡顿！填写我的邀请码：${invitedCode.value}，邀请好友一起领取现金红包！`,
    `新春大红包，等你来抢！高速专线护航，海外热门平台轻松访问，娱乐学习更高效！填写我的邀请码：${invitedCode.value}，快来帮我一起领取现金奖励！`,
    `🌟 喜从天降！不论何处，访问更稳定的全球内容，为你的娱乐与研究之路减轻负担。填写我的邀请码 ${invitedCode.value}，一起赢现金红包，秒提现！快来助我一臂之力吧！🎉`,
    `🏮 新春大礼等你拿！专业支持，让你畅享各类资源，提升信息检索速度，让学习更高效。填写邀请码 ${invitedCode.value}，千元红包不是梦，速来助攻！🧧`,
    `🔥 红包雨来袭！更快的网络，带来更高的工作与娱乐效率。输入邀请码 ${invitedCode.value}，立享无门槛现金奖励，提现无障碍！💸`,
    `🌈 天降鸿福，流畅访问，多彩资源轻松呈现，无需担心卡顿，轻松沉浸数字世界。输入 ${invitedCode.value} 邀请码，红包直达你的账户，快快助我完成目标！💎`,
    `兔年开门红，加速你的网络，享受更高质量的连接，让你的浏览如行云流水般顺畅。${invitedCode.value}，立刻抢新年红包！`,
    `限时活动开启！减少不必要的延迟，集中于真正重要的部分，让你的设备在信息世界中疾速穿行。用邀请码${invitedCode.value}加入，红包大奖等你拿！`,
    `兔年大吉，清晰音频与流畅视频，让体验更愉悦，轻松链接，让你的创造与探索更畅快。邀请码${invitedCode.value}，千万红包等你来分！`,
    `兔年福利大派送！无需宣传，只用稳定表现征服你。邀请码${invitedCode.value}，快来领取新春红包！`,
    `新春惊喜不等人！低调而高效，让你的在线生活悄然提速。输入${invitedCode.value}，马上参与活动！`,
    `新迎兔年福气满满！轻松访问海外资源，减少等待，用更短时间获取有用信息。用邀请码${invitedCode.value}，领取你的专属红包！`,
    `兔年福利到，高速访问，无需等待，直达重点内容。快输入我的邀请码${invitedCode.value}，新年好礼送到家！`,
    `兔年好运势不可挡！每次轻点，感受无阻畅连，如同置身世界中央。输入${invitedCode.value}，限时红包等你领！`,
    `限时福利不容错过！让网络更贴近你的使用需求，放心遨游。快输入我的邀请码${invitedCode.value}，抢新年红包大奖！`,
    `兔年惊喜升级！不需声张，只用顺畅表现打动你。快来使用我的邀请码${invitedCode.value}，新春红包先到先得！`,
    `兔年喜气洋洋！从音乐到学术，从纪录片到网课，我们的优化策略让所有内容更易触及。输入${invitedCode.value}，马上开启你的红包之旅！`,
    `限时福利快抢！更聪明的连接方式，让你的每次访问都有所提升。邀请码${invitedCode.value}，红包雨就在眼前！`,
    `新年狂欢模式开启，从此不再为加载条发愁，直达目标内容。输入${invitedCode.value}，专属红包等着你！`,
  ]
})
let txt ='一、活动周期<br>' +
    '本次活动持续至 10000000 元现金红包发放完毕为止。<br>' +
    '二、奖励机制<br>' +
    '\t1.\t每成功邀请一位新用户首次下载赛盾加速器，填写您的邀请码并开通任意会员，您即可获得 10 元无门槛现金红包。<br>' +
    '\t2.\t当您完成指定任务后，将有额外奖励加成。<br>' +
    '三、现金奖励发放<br>' +
    '现金奖励将在好友完成相应任务并经系统审核后，于规定工作日内发放至邀请人账户中，具体到账时间以系统提示为准。<br>' +
    '四、活动参与限制<br>' +
    '\t1.\t用户的同一个设备最多可使用一个帐号参与活动，同一帐号最多可以使用一台设备参与活动；用户使用多个账号在同一个设备上登录的，视为同一用户，仅有一个账号可参与活动。<br>' +
    '\t2.\t同一用户是指使用同一帐号、同一手机号、同一设备或同一提现账户的用户。上述与用户身份相关的信息，其中任意一项或数项相同，或通过特定标记形成关联，或本产品有合理理由认为存在关联的，都视为同一个用户。<br>' +
    '五、违规处理<br>' +
    '用户不得采取任何不正当或作弊的违规手段参与本活动，一经发现，本产品有权采取以下措施：<br>' +
    '\t1.\t限制或取消用户参与活动的资格；<br>' +
    '\t2.\t取消奖励、追讨用户已领取的奖励（或同等价值的现金）；<br>' +
    '\t3.\t对违规用户采取限制登录、封禁帐号的措施，并保留追究用户其他法律责任的权利。<br>' +
    '违规手段包括但不仅限于：<br>' +
    '\t1.\t通过不正当手段参与活动，例如使用非官方客户端、模拟器、插件、群控工具、软件外挂、物理外挂等违规工具参与活动，与其他用户串通采取不正当手段谋取活动奖励等；<br>' +
    '\t2.\t扰乱本活动秩序，例如使用多个账号参与活动，修改个人位置信息，篡改设备数据，买卖用户帐号，买卖活动权益，买卖领奖资格等；<br>' +
    '\t3.\t干扰本产品正常运营，例如批量注册用户账号，违规使用用户账号，使用有作弊嫌疑的手机号或第三方平台账号，采用技术手段对本产品进行干扰、破坏、修改或施加其他影响；<br>' +
    '\t4.\t利用本活动进行违法犯罪，例如利用本活动洗钱、套现、诈骗，或开展其他违反国家法律法规的活动；<br>' +
    '\t5.\t同一用户注册、持有、使用或控制多个本产品账号；<br>' +
    '\t6.\t其他违反法律法规，违背诚实信用原则，违反活动规则，或本产品认为的不正当手段。<br>' +
    '六、活动暂停或取消的情况<br>' +
    '如因以下原因导致本活动不能正常举办、用户无法参与或参与失败、活动奖励发放错误等，本产品有权暂停或取消本活动，且不承担任何法律责任或不利后果：<br>' +
    '\t1.\t不可抗力和情势变更，包括但不限于自然灾害，有权机关的政策要求，政府机关指令，重大疫情影响等不能预见、不可避免、不能克服的情况，或其他客观情况变更导致本活动无法正常进行的情况；<br>' +
    '\t2.\t本产品发生技术故障，本活动受到不正当技术手段干扰、破坏、篡改或施加其他影响，第三方平台限制本活动，或其他导致本活动的正常秩序受到干扰的情况；<br>' +
    '\t3.\t用户所在地区网络故障、支付平台故障、电信运营商故障等非本产品所能控制的情况。<br>' +
    '七、用户自身原因导致无法享有奖励<br>' +
    '如由于用户自身原因（包括但不限于参与方式不符合活动规则、操作不当造成产品功能故障等）导致无法实际享有奖励的，视为用户自愿放弃奖励，本产品将不会也无义务给予任何形式的补偿。<br>' +
    '八、第三方欺诈、违法行为<br>' +
    '任何第三方以本产品名义从事欺诈、违法行为造成用户损失的，本产品无需为此承担法律责任。<br>' +
    '九、活动规则变动<br>' +
    '在法律法规允许的范围内，本产品有权对本活动规则进行变动或调整，相关变动或调整将公布在活动规则页面上，并于公布时即时生效，用户继续参与活动则视为同意并接受变动或者调整后的活动规则。如果用户拒绝活动规则的变更或者调整，请放弃参与变更后的活动。<br>' +
    '十、问题反馈与最终解释权<br>' +
    '\t1.\t如用户在参与本系列活动的过程中遇到任何问题或有任何意见反馈，请在 App 中将问题反馈给我们。<br>' +
    '\t2.\t本活动最终解释权归赛盾加速器所有。'
provide('txt',txt)
const options: CountUpOptions = {
  separator: '',
  prefix: '¥'
}
let countUp: ICountUp | undefined
const toback = () => {
  // proxy.$router.go(-1)
  if(userInfo.value.invite_valid==true){
    return showToast('已填写邀请码')
  }
  proxy.$router.push('/invited')
}
const onInit = (ctx: ICountUp) => {
  countUp = ctx
}
const onFinished = () => {
  console.log('finished')
}
const getCode = () => {
  getInvitedCode().then(res => {
    isFirst.value = false
    toTxt.value = '复制邀请码'
  })
}
const checkEgg = (val: number) => {
  let number: number
  switch (val) {
    case 0:
      number = Math.ceil(Math.random() * 4)
      ShowNToast.value =true
      ShowNToastTxt.value =list[val]['txt' + number]
      break;
    case 1:
      number = Math.ceil(Math.random() * 5)
      ShowNToast.value =true
      ShowNToastTxt.value =list[val]['txt' + number]
      break;
    case 2:
      number = Math.ceil(Math.random() * 3)
      ShowNToast.value =true
      ShowNToastTxt.value =list[val]['txt' + number]
      break;
  }
}
const copyTxt = ()=>{
  if (isFirst.value == true) {
    return showToast(' 请申请成为高级推广人员')
  }
  let num = Math.ceil(Math.random() * (invitedList.value.length-1))
  let txt = `\r\n下载链接：${userInfo.value.download_link}，\r\n请复制到浏览器下载,\r\n\r\n 备用链接1：${userInfo.value.backup1_download_link},\r\n\r\n备用链接2：${userInfo.value.backup2_download_link},\r\n官网链接：${userInfo.value.gw},\r\nPC:复制浏览器下载哦`
  proxy.$tool.onClickCopy(invitedList.value[num]+txt,'邀请链接已复制，快去邀请好友吧')
}
const toMyS = () => {
  proxy.$router.push('/myIncome')
}
const toRanking = () => {
  // showToast('去排行榜页面')
  proxy.$router.push('/ranking')
}
const toShare = () => {
  // showToast('去排行榜页面')
  proxy.$router.push('/myShare')
}
const toRules = () => {
  showWin.value = true
}
const copy = () => {
  if (isFirst.value == true) {
    return showToast(' 请申请成为高级推广人员')
  }
  proxy.$tool.onClickCopy(invitedCode.value)
}
const getInvitedCode = async () => {
  loading.value = true
  if (isFirst.value == false) {
    copy()
    loading.value = false
    return
    // return showToast(' 已经是高级推广人员')
  }
  await proxy.$API.User.getInvitedCode({token: localStorage.getItem('token')}).then(res => {
    isFirst.value = false
    toTxt.value = '复制邀请码'
    invitedCode.value = res.result
    loading.value = false
  })
}
const geiInfo = async () => {
  await proxy.$API.User.geiInfo({token: localStorage.getItem('token')}).then(res => {
    if(res.code==200){
      if (res.result.invite_code) {
        isFirst.value = false
        toTxt.value = '复制邀请码'
      }else {
        // toTxt.value = '复制邀请码'
      }
      invitedCode.value = res.result.invite_code
      endValueRef.value = res.result.bonus_pool
      getList.value = res.result.money_list
      userInfo.value = res.result
      loading.value =false
      localStorage.setItem('url',res.result.download_link)
      localStorage.setItem('code', res.result.invite_code)
    }else{
      loadingTxt.value = res.remark
      // showToast(res.remark)
    }
  })
}
onMounted(() => {
  loading.value =true
  lottie.loadAnimation({
    container: proxy.$refs.lavContainer1, //选择渲染dom
    renderer: "svg", //渲染格式
    loop: true, //循环播放
    autoplay: true, //是否i自动播放,
    animationData: egg1//渲染动效json
  });
  lottie.loadAnimation({
    container: proxy.$refs.lavContainer2, //选择渲染dom
    renderer: "svg", //渲染格式
    loop: true, //循环播放
    autoplay: true, //是否i自动播放,
    animationData: egg2//渲染动效json
  });
  lottie.loadAnimation({
    container: proxy.$refs.lavContainer3, //选择渲染dom
    renderer: "svg", //渲染格式
    loop: true, //循环播放
    autoplay: true, //是否i自动播放,
    animationData: egg3//渲染动效json
  });
  if (proxy.$route.query.token) {
    let token = proxy.$route.query.token
    localStorage.setItem('token', token)
  }
  geiInfo()
})
</script>

<template>
  <div class="box">
    <loadComponent></loadComponent>
    <showTo></showTo>
    <showBox></showBox>
    <div class="rules2" @click="toback" >
    填写邀请码
    </div>
    <!--<img alt="" class="back" src="@/assets/images/activityImg/back.png" @click="toback">-->
    <div class="rules" @click="toRules">
      活动规则
    </div>
    <div class="acTxt"></div>
    <img alt="" class="img1" src="@/assets/images/activityImg/img1.png">
    <img alt="" class="img2" src="@/assets/images/activityImg/img2.png">
    <div class="price">
      <div class="txt">
        <CountUp
            :delay="2"
            :duration="5"
            :end-val="endValueRef"
            :options="options"
            :start-val="num"
            @finished="onFinished"
            @init="onInit"></CountUp>
      </div>
    </div>
    <div class="notice">
      <van-notice-bar :scrollable="false" background="rgba(1,1,1,0)">
        <van-swipe
            :autoplay="3000"
            :show-indicators="false"
            :touchable="false"
            class="notice-swipe"
            vertical
        >
          <van-swipe-item v-for="(v,i) in getList" :key="i">
            <div class="vanStyle">
              <div class="color">{{ v.username }}</div>
              用户已提现现金红包
              <div class="color">{{ v.cash }}</div>
              元
            </div>
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="myInvited">
      <img alt="" class="l1" src="@/assets/images/activityImg/l1.png">
      <img alt="" class="l2" src="@/assets/images/activityImg/l2.png">
      <div class="l3 flexC" @click="getCode">
        {{ toTxt }}
      </div>
      <div class="l4 flexC" @click="copyTxt">
        立即分享
      </div>
      <div class="l5">
        您的专属邀请码:
      </div>
      <div class="l6" @click="copy">
        {{ !isFirst ? invitedCode : '******' }}
      </div>
    </div>
    <div class="egg">
      <div class="item" @click="checkEgg(0)" ref="lavContainer1">

      </div>
      <div class="item" @click="checkEgg(1)" ref="lavContainer2"></div>
      <div class="item" @click="checkEgg(2)" ref="lavContainer3"></div>
    </div>
    <div class="btmTxt">
      本活动最终归属权由 <span class="icon"></span> 赛盾加速器公司所有
    </div>
    <div class="btmTxt" style="margin-bottom: 79px"> 由赛盾、猎豹加速器、银狐加速器联合赞助</div>
    <div class="fixBtm flexC">
      <div class="btm" @click="copyTxt" style="margin-right: 70px"><img alt="" class="img11" src="@/assets/images/activityImg/icon1.png">
        口令邀请
      </div>
      <div class="btm" @click="toShare"><img alt="" class="img22" src="@/assets/images/activityImg/icon2.png">图片邀请</div>
    </div>
    <div class="myS" @click="toMyS">
      我的收益
    </div>
    <div class="ranking" @click="toRanking">排行榜</div>

  </div>

</template>

<style lang="scss" scoped>
.box::-webkit-scrollbar {
  width: 0;
}

.box {
  width: 375px;
  height: auto;
  font-size: 20px;
  //background-image: url("@/assets/images/activityImg/bg.png");
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom,#1A0D84,#3E46DC);
  background-size: 100% auto;
  background-position: top;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;

  .back {
    width: 20px;
    height: 25px;
    position: absolute;
    left: 13px;
    top: 40px;
    z-index: 11;
  }

  .rules {
    width: 62px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    color: white;
    position: absolute;
    top: 43px;
    right: 24px;
    z-index: 11;
    background-size: 62px 24px;
    background-image: url("@/assets/images/activityImg/btm2.png");
    background-repeat: no-repeat;
  }
  .rules2 {
    width: 82px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    color: white;
    position: absolute;
    top: 43px;
    left: 24px;
    z-index: 11;
    background-size: 82px 24px;
    background-image: url("@/assets/images/activityImg/btm2.png");
    background-repeat: no-repeat;
  }
  .acTxt {
    width: 375px;
    height: 59px;
    margin-top: 70px;
    background-image: url("@/assets/images/activityImg/actxt.png");
    background-repeat: no-repeat;
    background-size: 110% 110%;
    background-position: center center;
    margin-bottom: 219px;
  }

  .img1 {
    width: 366px;
    height: 211px;
    position: absolute;
    top: 78px;
    left: 0;
    z-index: 1;
  }

  .img2 {
    width: 347px;
    height: 71px;
    position: absolute;
    top: 194px;
    left: 12px;
    z-index: 2;
  }

  .price {
    width: 320px;
    height: 61px;
    background-image: url("@/assets/images/activityImg/btm3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 28px;
    top: 270px;
    display: flex;
    justify-content: center;
    align-items: center;

    .txt {
      width: 100%;
      font-family: txtP, sans-serif;;
      font-weight: 400;
      font-size: 48px;
      //color: #FFFFFF;
      //text-shadow: 0 0 0 #7A6BEA;
      background: linear-gradient(180deg, #F59A24 0%, #FDD250 47.9736328125%, #FA9716 100%);
      -webkit-background-clip: text;
      white-space: nowrap;
      -webkit-text-fill-color: transparent;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .notice {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    height: 25px;
    background-image: url("@/assets/images/activityImg/bg2.png");
    background-repeat: no-repeat;
    background-size: 100% 25px;

    .van-notice-bar {
      width: 100%;
      text-align: center;
      //height: 25px;
      //background: rgba(1, 1, 1, 0) !important;
      //color: white;
    }

    .notice-swipe {
      height: 25px;
      line-height: 25px;
    }

    .vanStyle {
      text-align: center;
      width: 100%;
      display: flex;
      justify-content: center;

      .color {
        color: RGBA(11, 165, 244, 1);
      }
    }

  }

  .myInvited {
    width: 347px;
    height: 234px;
    background-image: url("@/assets/images/activityImg/bg3.png");
    background-repeat: no-repeat;
    background-size: 347px 234px;
    margin: 0 auto 16px;
    position: relative;

    .l1 {
      width: 204px;
      height: 58px;
      position: absolute;
      top: 11px;
      left: 4px
    }

    .l2 {
      width: 77px;
      height: 82px;
      position: absolute;
      top: 3px;
      right: 51px
    }

    .l3 {
      width: 132px;
      height: 39px;
      position: absolute;
      top: 108px;
      right: 33px;
      background-image: url("@/assets/images/activityImg/btm2.png");
      background-repeat: no-repeat;
      background-size: 132px 39px;
      color: white;
      font-size: 16px;
      font-weight: lighter;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .l4 {
      width: 174px;
      height: 50px;
      position: absolute;
      top: 174px;
      right: 86px;
      background-image: url("@/assets/images/activityImg/btm4.png");
      background-repeat: no-repeat;
      background-size: 174px 50px;
      color: white;
      font-size: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .l5 {
      width: 144px;
      font-family: black, "Niagara Engraved", sans-serif;
      height: 15px;
      position: absolute;
      left: 25px;
      top: 82px;
      font-weight: normal;
      font-size: 15px;
      color: #FEFEFE;
      line-height: 21px;
    }

    .l6 {
      width: 125px;
      height: 26px;
      position: absolute;
      left: 32px;
      top: 120px;
      font-size: 24px;
      color: #FEFEFE;
      line-height: 21px;
      letter-spacing: 5px;
    }
  }

  .egg {
    width: 100%;
    height: 65px;
    margin-bottom: 13px;
    display: flex;
    justify-content: center;
    align-items: center;

    .item {
      width: 101px;
      height: 65px;
      //background-image: url("@/assets/images/activityImg/egg.png");
      //background-repeat: no-repeat;
      //background-size: 101px 65px;
    }
  }

  .btmTxt {
    width: 100%;
    word-break: break-all;
    margin: 0 auto;
    font-size: 12px;
    line-height: 16px;
    color: rgba(189, 194, 248, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transform: scale(.8);
    transform-origin: top;

    .icon {
      width: 14px;
      height: 14px;
      background-image: url("@/assets/images/activityImg/icon.png");
      background-repeat: no-repeat;
      background-size: 14px 14px;
    }
  }

  .fixBtm {
    width: 100%;
    height: 69px;
    background: white;
    position: fixed;
    left: 0;
    bottom: 0;

    .btm {
      width: 110px;
      height: 44px;
      background-image: url("@/assets/images/activityImg/btm5.png");
      background-repeat: no-repeat;
      background-size: 110px 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: txtP, sans-serif;;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 12px;

      .img11 {
        width: 25px;
        height: 29px;
        margin-right: 6px;
      }

      .img22 {
        width: 25px;
        height: 27px;
        margin-right: 6px;
      }
    }
  }

  .myS {
    width: 58px;
    height: 25px;
    background-image: url("@/assets/images/activityImg/btm5.png");
    background-repeat: no-repeat;
    background-size: 100% 25px;
    position: fixed;
    right: 0;
    top: 337px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-size: 12px;
    color: white;
  }

  .ranking {
    color: white;
    width: 56px;
    height: 25px;
    background-image: url("@/assets/images/activityImg/btm5.png");
    background-repeat: no-repeat;
    background-size: 100% 25px;
    position: fixed;
    right: 0;
    top: 373px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    font-size: 12px;
  }
}

::v-deep .van-notice-bar__content.van-ellipsis {
  width: 100% !important;
  color: white;
}

.flexC {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>
